import {Component, Input, OnInit} from '@angular/core';
import {NzDrawerRef} from 'ng-zorro-antd';
import {FormItemTypes, FormItemValidators} from '../../../../consts/FormElementConsts';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {FieldBase} from '../../model/FieldBase';

const convert = require('chinese2pinyin');

@Component({
  selector: 'app-edit-form-item',
  templateUrl: './edit-form-item.component.html',
  styleUrls: ['./edit-form-item.component.css']
})
export class EditFormItemComponent implements OnInit {

  @Input() value: FieldBase;
  @Input() formId: any;

  itemTypes = FormItemTypes;
  itemValidators = FormItemValidators;
  elementFormGroup: FormGroup;

  elementWidthStyle = 'line';

  constructor(private drawerRef: NzDrawerRef<string>,
              private fb: FormBuilder) {
  }

  ngOnInit(): void {
    if (this.value) {
      this.elementFormGroup = this.fb.group({
        name: [this.value.name, Validators.required],
        id: [this.value.id, Validators.required],
        type: [this.value.type, Validators.required],
        required: [this.value.required, Validators.required],
        placeholder: this.value.placeholder,
        isMultiple: [this.value.isMultiple, Validators.required],
        validators: this.value.validators,
        optionSource: [this.value.optionSource, Validators.required],
        options: [this.value.options, Validators.required],
        labelWidth: [this.value.labelWidth, Validators.required],
        controlWidth: [this.value.controlWidth, Validators.required],
        emptyHidden: this.value.emptyHidden
      });
      this.initElementWidthStyle();
    } else {
      this.elementFormGroup = this.fb.group({
        name: ['', Validators.required],
        id: ['', Validators.required],
        type: [null, Validators.required],
        required: [true, Validators.required],
        placeholder: '',
        isMultiple: [false, Validators.required],
        validators: null,
        optionSource: ['', Validators.required],
        options: ['', Validators.required],
        labelWidth: [4, Validators.required],
        controlWidth: [20, Validators.required],
        emptyHidden: false
      });
    }
  }

  private initElementWidthStyle() {
    if (this.value.labelWidth === 4 && this.value.controlWidth === 20) {
      this.elementWidthStyle = 'line';
    } else if (this.value.labelWidth === 4 && this.value.controlWidth === 8) {
      this.elementWidthStyle = 'half';
    } else {
      this.elementWidthStyle = 'customize';
    }
  }

  close() {
    this.drawerRef.close();
  }

  submit() {
    const element = this.elementFormGroup.value;
    element.formId = this.formId;
    this.drawerRef.close(element);
  }

  showPlaceholder() {
    const chooseType = this.elementFormGroup.get('type').value;
    return chooseType ? chooseType !== 'choice' && chooseType !== 'period' && chooseType !== 'table' : false;
  }

  showMultiple() {
    const chooseType = this.elementFormGroup.get('type').value;
    return chooseType ? chooseType === 'autocomplete' || chooseType === 'choice' || chooseType === 'user' || chooseType === 'org' : false;
  }

  showOptionSource() {
    const chooseType = this.elementFormGroup.get('type').value;
    return chooseType ? chooseType === 'autocomplete' || chooseType === 'choice' : false;
  }

  changeElementWidth(value: any) {
    if (value === 'line') {
      this.elementFormGroup.get('labelWidth').setValue(4);
      this.elementFormGroup.get('controlWidth').setValue(20);
    }
    if (value === 'half') {
      this.elementFormGroup.get('labelWidth').setValue(4);
      this.elementFormGroup.get('controlWidth').setValue(8);
    }
  }

  generateId() {
    const id = convert({
      cn: this.elementFormGroup.value.name,
      result: 'P'
    });
    this.elementFormGroup.get('id').setValue(id ? id : this.elementFormGroup.value.name);
  }
}
